<template>
  <view class="page container">
    <u-form
      :model="basicForm"
      :rules="rules"
      labelPosition="top"
      ref="form"
      labelWidth="auto"
      :labelStyle="{
      	fontSize: '14px',
      	color: '#B2B2B2',
      	lineHight: '20px'
      }"
    >
      <view class="basic-style">
        <u-form-item v-if="commercialType=='1'" label="客户名称" prop="khdaId" required>
          <h-select-customer-input-popup
            style="width: 100%"
            v-model="basicForm.khdaId"
            :commercialType="commercialType"
            placeholder="请选择客户名称"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"
            border="surround"
						auditStatus="2"/>
        </u-form-item>
				<u-form-item v-else label="供应商名称" prop="khdaId" required>	
					<h-select-customer-input-popup
						style="width: 100%"
						commercialType="2"
						:isJudge='true'
						@onJudge='onJudge'
						v-model="basicForm.khdaId"
						border="surround"
						placeholder="请选择供应商名称"
						suffixIcon="arrow-down-fill"
						:suffixIconStyle="{ color: '#B2B2B2' }"/>
					<u-icon style="margin-left: 10upx;" name="plus" color="#2979ff" size="24" @click="getUnSupplier"/>
				</u-form-item>
				<template v-if="isFk">
					<u-form-item label="是否为付款单位" prop="isFk" required>
					  <h-select-input-tag
					    name="isFk"
					    class="w-100"
					    v-model="basicForm.isFk"
					    objectField="basicForm.isFk"
							suffixIcon="arrow-down-fill"
							:suffixIconStyle="{ color: '#B2B2B2' }"
					    placeholder="请选择是否为付款单位"
					    border="surround"
					    dictName="yes_no"
					  ></h-select-input-tag>
					</u-form-item>
				</template>
        <template v-else>
        	<u-form-item label="是否为收款单位" prop="isSk" required>
        	  <h-select-input-tag
        	    name="isSk"
        	    class="w-100"
        	    v-model="basicForm.isSk"
        	    objectField="basicForm.isSk"
        			suffixIcon="arrow-down-fill"
        			:suffixIconStyle="{ color: '#B2B2B2' }"
        	    placeholder="请选择是否为收款单位"
        	    border="surround"
        	    dictName="yes_no"
        	  ></h-select-input-tag>
        	</u-form-item>
        </template>
				
				<template v-if="signSealWay == 'online'">
					<u-form-item label="对方是否电子签章" prop="isSignSeal" required>
						<h-dict-radio v-model="basicForm.isSignSeal" dictName="yes_no" @input="isSignSealInput"></h-dict-radio>
					</u-form-item>
					<u-form-item label="对方盖章人" prop="psnName" required v-if="basicForm.isSignSeal && basicForm.isSignSeal == 1">
						<u--input v-model="basicForm.psnName" placeholder="请输入对方盖章人"></u--input>
					</u-form-item>
					<u-form-item label="联系方式" prop="psnMobile" required v-if="basicForm.isSignSeal && basicForm.isSignSeal == 1">
						<u--input v-model="basicForm.psnMobile" placeholder="请输入联系方式"></u--input>
					</u-form-item>
				</template>
      </view>

      <view class="space-x-1 mt-1" style="display: flex">
        <u-button type="primary" text="保存" :loading="loading" @click="onSubmit"></u-button>
        <u-button type="primary" text="关闭" :loading="loading" @click="onClose"></u-button>
      </view>
    </u-form>
  </view>
</template>

<script>
import { Decimal } from 'decimal.js'
import moment from 'moment'

export default {
  name: 'FormA',
  props: {
    teamId: {
			type: [String, Number],
			default: '',
			required: false
		},
    companyId: {
			type: [String, Number],
			default: '',
			required: false
		},
		// 用印类型 电子签章 - 实体用印
		signSealWay: {
			type: [String, Number],
			default: '',
			required: false
		},
    // 表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    datailDisabled: {
      type: Boolean,
      default: false,
    },
    index: {
      type: Number,
      default: null,
    },
		isFk: {
			type: Boolean,
			default: true,
		},
		commercialType: {
			type: String,
			default: '1',
		}
  },
  data() {
    return {
      loading: false,
      basicForm: {
        khdaId: '',
        isFk: '',
				isSk: '',
				isSignSeal: '0' // 默认为否
      },
      rules: {
        khdaId: [{ required: true, message: '请选择名称!', trigger: ['blur', 'change'] }],
        isFk: [{ required: true, message: '请选择是否为付款单位!', trigger: ['blur', 'change'] }],
        isSk: [{ required: true, message: '请选择是否为收款单位!', trigger: ['blur', 'change'] }],
				isSignSeal: [ { required: true, message: '请选择对方是否电子签章!', trigger: ['blur', 'change'] } ],
				psnName: [ { required: true, message: '请输入对方盖章人!', trigger: ['blur'] } ],
				psnMobile: [
					{ required: true, message: '请输入联系方式!' },
					{ pattern: /(^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$)|(^\/$)/, message: '请输入正确的联系方式!', trigger: ['blur', 'change'] }
				]
      },
    }
  },
  methods: {
	  // 跳转到完善非正式供应商信息
	getUnSupplier(){
		
		uni.navigateTo({
			url:'/pages/purchase/components/unSupplierForm'
		})
		
	},
		// 点击对方是否为电子签章
		isSignSealInput () {
			this.$set(this.basicForm, 'psnName', '')
			this.$set(this.basicForm, 'psnMobile', '')
		},
	onJudge(){
		// 保存返回的监听，事先处理好
		uni.$on("supplierBack", res => {
			
			this.basicForm.khdaId = res.id
			
			// 清除监听
			uni.$off('supplierBack');
		})
		
		uni.navigateTo({
			url:'/pages/common/selectSupplier/selectSupplierInput'
		})
	},
    reset() {
      this.$refs.form.resetFields()
    },
    async onSubmit() {
      await this.$refs.form.validate()
			if(this.loading) return
			this.loading = true
      if (!this.index) {
        this.$emit('submit', [{
          id: parseInt(Math.random() * 1000000000000),
          ...this.basicForm,
        }, this.index])
      } else {
        this.$emit('submit', [this.basicForm, this.index])
      }
    },
    onClose() {
			this.loading = false
      this.$emit('close')
    },
  },
  watch: {
		isFk: {
			handler(val) {
			  if(val){
					this.$set(this.rules,'isFk',[{ required: true, message: '请选择是否为付款单位!' }])
					this.$delete(this.rules,'isSk')
				} else {
					this.$set(this.rules,'isSk',[{ required: true, message: '请选择是否为收款单位!' }])
					this.$delete(this.rules,'isFk')
				}
			},
			immediate: true,
		}
  },
}
</script>

<style scoped></style>
